<template>
  <div class="role-tree">
    <Tree :data="showTree" ref="tree" show-checkbox expand-node></Tree>
  </div>
</template>

<script>
import { getJsonMenuList } from '@/api/organ/system'
import { pageInfo } from '@/config'

export default {
  name: 'roleTree',
  data () {
    return {
      pageInfo: pageInfo,
      tempTree: [],
      tree: []
    }
  },
  props: {
    resourceIdList: {
      type: Array,
      default: () => {
        return []
      }
    },
    levelCode: {
      type: String,
      default: ''
    }
  },
  computed: {
      showTree() {
        if(this.levelCode) {
          return   this.tree.filter((item) => {
          return item.unitLevelCode == this.levelCode
          })
        }else {
          return this.tree
        }

      
      }
    },
  mounted () {
    this.getJsonMenuListApi()
  },
  methods: {
    getCheckedAndIndeterminateNodes () {
      let arr = []
      let nodes = this.$refs['tree'].getCheckedAndIndeterminateNodes()
      nodes.forEach(val => {
      
        arr.push(val.id)
        val.buttonList.forEach(v => {
          if (v.selected) arr.push(v.id)
        })
      })
      this.$emit('onOver', arr)
    },
    readNodes (nodes = [], arr = []) {
      for (let item of nodes) {
        item.expand = true
        item.title = item.name
        item.selected = false

        if (this.resourceIdList.filter((v) => v.id == item.id).length) {
          let menu = this.resourceIdList.find(v => v.id === item.id)
          if (!(item.children && item.children.length)) {
            item.checked = true
            item.buttonList.map(v => {
              v.selected = false
              for (let i = 0; i < menu.button.length; i++) {
                if (v.id === menu.button[i]) {
                  v.selected = true
                }
              }
              return v
            })
          }
        }
        item.render = (h, { root, node, data }) => {
          let checkbox = []
             
          data.buttonList.forEach(item => {
            checkbox.push(h('checkbox', {
              props: {
                value: item.selected
              },
              nativeOn: {
                click: () => {
                
                }
              },
              on: {
                'on-change': (v) => {
                  item.selected = v
                }
              }
            }, item.buttonName))
          })

          return h('div', {
            style: {
              transition: 'all .4s',
              margin: '25px 0 0 -40rpx',
              height: data.resourceType && data.checked === 2 ? '30px' : 'unset'
            }
          },
          [
            h('div', data.resourceType === 2 ? [
              h('div', {
                style: {
                  display: 'inline-block',
                  width: '100%',
                  position: 'absolute',
                  top: 0,
                  left: '45px'
                }
              }, data.name),
              data.checked ? h('div', {
                style: {
                  margin: '25px 0 0 0',
                  display: 'flex',
                  width: '400px',
                  alignItems: 'center',
                  flexWrap: 'wrap'
                }
              }, checkbox) : ''
            ] : {
              style: {
                width: '100%',
                position: 'absolute',
                top: 0,
                left: '45px'
              }
            }, data.name)
          ])
        }
        if (item.children && item.children.length) this.readNodes(item.children, arr)
      }
    },
    getJsonMenuListApi () {
      return new Promise(resolve => {
        getJsonMenuList({
          returnSystem: true
        }).then(res => {
          if (res.code === 1) {
            this.tempTree = res.data
            this.readNodes(this.tempTree)
            this.tree = this.$cu.deepClone(this.tempTree)
            this.$emit('onReady')
            resolve()
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
